<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MFA Challenge alternatives</title>
    <!-- CSS -->
    <link rel="stylesheet" th:href="@{../../assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{../../assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{../../assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../../assets/css/mfa_challenge_alternatives.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{../../assets/ico/favicon.ico}">
</head>
<body>
<div class="mdl-layout mdl-js-layout">
    <div class="mfa-challenge-alternatives-container">
        <div class="mfa-challenge-alternatives-form">
            <div class="mfa-challenge-alternatives-form-title">
                <label>Select a Multi-Factor Auth</label>
            </div>
            <form role="form" th:action="${action}" method="post">
                <ul class="mdl-list">
                    <li class="mdl-list__item mdl-list__item--three-line" th:each="factor : ${factors}">
                        <!-- TOTP FACTOR -->
                        <span th:if="${factor.factorType == 'TOTP'}" class="mdl-list__item-primary-content">
                            <i class="material-icons mdl-list__item-avatar">cloud_download</i>
                            <span>Mobile app</span>
                            <span class="mdl-list__item-text-body">Use a verification code displayed on your multi-factor authenticator app from your device.</span>
                        </span>
                        <!-- SMS|CALL FACTOR -->
                        <span th:if="${factor.factorType == 'SMS' || factor.factorType == 'CALL'}" class="mdl-list__item-primary-content">
                            <i th:if="${factor.factorType == 'CALL'}" class="material-icons mdl-list__item-avatar">phone_enabled</i>
                            <i th:if="${factor.factorType == 'SMS'}" class="material-icons  mdl-list__item-avatar">textsms</i>
                            <span>[[${factor.factorType}]]</span>
                            <span class="mdl-list__item-text-body">Phone: <b th:text="${factor.target}"></b>.</span>
                        </span>
                        <!-- EMAIL FACTOR -->
                        <span th:if="${factor.factorType == 'EMAIL'}" class="mdl-list__item-primary-content">
                            <i class="material-icons mdl-list__item-avatar">email</i>
                            <span>Email</span>
                            <span class="mdl-list__item-text-body">Send an email to <b th:text="${factor.target}"></b>.</span>
                        </span>
                        <span class="mdl-list__item-secondary-action">
                          <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" th:for="'list-factor-' + ${factor.id}">
                            <input type="radio" th:id="'list-factor-' + ${factor.id}" class="mdl-radio__button" th:name="factorId" th:value="${factor.id}" />
                          </label>
                        </span>
                    </li>
                </ul>
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <div class="mfa-challenge-alternatives-form-actions">
                    <span style="flex: 1 1 0%;"></span>
                    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Next</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--[if lt IE 10]>
<script th:src="@{assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{../../assets/material/material.min.js}"></script>
<script th:src="@{../../assets/js/jquery-3.5.1.min.js}"></script>
</body>
</html>
